<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Meus Concursos</title>
	<link rel="stylesheet" type="text/css"
		href="#{facesContext.externalContext.requestContextPath}/public/css/style2.css" />
	<script type="text/javascript"
		src="#{facesContext.externalContext.requestContextPath}/public/javascript/jquery.flexslider-min.js"></script>
	<script type="text/javascript"
		src="#{facesContext.externalContext.requestContextPath}/public/javascript/scripts.js"></script>
	<script type="text/javascript"
		src="#{facesContext.externalContext.requestContextPath}/public/javascript/selectivizr.js"></script>

	<link rel="shortcut icon" type="image/x-icon"
		href="#{request.contextPath}/public/images/favicon.ico" />
	<link rel="shortcut icon" type="image/x-icon"
		href="#{request.contextPath}/public/images/favicon.png" />

	<script type="text/javascript" language="JavaScript">
    	var $ = jQuery;
        $(document).ready(function() {
    		$("input[id*='campo_dataNascimento']").mask('99/99/9999');
        });
     </script>

</h:head>

<body>
	<div class="container">
		<header id="navtop"> <a href="/PDSConcursosWeb/" class="logo fleft"> <img
			src="../public/images/logo5.png" alt="" />
		</a> <nav class="fright"> <br />
		<br />
		<ul>
			<li><a href="/PDSConcursosWeb/">Inicio</a></li>
		</ul>
		</nav> </header>


		<div class="home-page main">
			<section class="grid-wrap"> <header class="grid col-full">
			<hr />
			</header> <br />
			<br />
			<br />
			<br />
			<div class="grid col-one-half mq2-col-full">
				<h3>
					<h:outputText value="Cadastro:" />
				</h3>
				<h:form id="form_CadUsuario">
					<font color="red" size="2"><h:outputText id="campo_obrigatorio"
							value="* Campo obrigatório" /></font>
					<br />
					<br />
					<table>
						<tr>
							<td><h:outputText value="Nome: " /><font color="red">*</font></td>
							<td><p:inputText value="#{usuarioMB.novoUsuario.nome}" id="campo_nome" required="true"
									requiredMessage="Campo obrigatório" style="width: 100%; height: 30px;" /></td>
							<td><p:message for="campo_nome" /></td>
						</tr>

						<tr>
							<td><h:outputText value="Email: " /><font color="red">*</font></td>
							<td><p:inputText value="#{usuarioMB.novoUsuario.email}" id="campo_email" required="true"
									requiredMessage="Campo obrigatório" style="width: 100%; height: 30px;"
									validatorMessage="Email inválido">
									<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.(com|net|org|edu)" />
								</p:inputText></td>
							<td><p:message for="campo_email" /></td>
						</tr>

						<tr>
							<td><h:outputText value="CPF: " /></td>
							<td><p:inputMask value="#{usuarioMB.novoUsuario.cpf}" mask="999.999.999-99"
									id="campo_cpf" style="width: 100%; height: 30px;" /></td>
						</tr>

						<tr>
							<td><h:outputText value="Data de Nascimento: " /></td>
							<td><p:calendar id="campo_dataNascimento" locale="pt" showButtonPanel="true"
									navigator="true" pattern="dd/MM/yyyy" yearRange="c-50:c-0"
									value="#{usuarioMB.dataNascimento}" /></td>
						</tr>

						<tr>
							<td><h:outputText value="Nome de Usuario: " /><font color="red">*</font></td>
							<td><p:inputText value="#{usuarioMB.novoUsuario.nomeUsuario}" id="campo_nomeUsuario"
									required="true" requiredMessage="Campo obrigatório" style="width: 100%; height: 30px;" /></td>
							<td><p:message for="campo_nomeUsuario" /></td>
						</tr>

						<tr>
							<td><h:outputText value="Senha: " /><font color="red">*</font></td>
							<td><p:password id="senha1" value="#{usuarioMB.novoUsuario.senha}" feedback="true"
									promptLabel="Insira a senha" goodLabel="Boa" weakLabel="Fraca" strongLabel="Forte"
									required="true" requiredMessage="Campo obrigatório" style="width: 100%; height: 30px;" /></td>
							<td><p:message for="senha1" /></td>
						</tr>

						<tr>
							<td><h:outputText value="Repetir Senha: " /><font color="red">*</font></td>
							<td><p:password id="verificacaoSenha" value="#{usuarioMB.verificacaoSenha}"
									required="true" requiredMessage="Campo obrigatório" style="width: 100%; height: 30px;" /></td>
							<td><p:message for="verificacaoSenha" /></td>
						</tr>
						<tr>
							<td><br /> <br /></td>
						</tr>
						<tr>
							<td><p:commandButton action="#{usuarioMB.cadastrarUsuario}" update="form_CadUsuario"
									value="Cadastrar" styleClass="ui-priority-primary" style="width: 100%; height: 30px;" /></td>
						</tr>
					</table>

				</h:form>
			</div>

			</section>
			<br /> <br /> <br /> <br />
		</div>

		<div class="divide-top">
			<footer class="grid-wrap">
			<ul class="grid col-one-third social">
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
				<li><a href="#">Link 5</a></li>
			</ul>
			</footer>
		</div>
	</div>
</body>
</html>